<template>
<!-- 模态框 -->
    <div class="modal-backdrop">
        <div class="modal">
            <div class="modal-header">
                <slot name="header">
                    <h2>信息提示：</h2>
                </slot>
            </div>
            <div class="modal-body">
                <slot name="body">
                    <h3><span>|</span>再次确认是否交卷？交卷后将不能继续答题！</h3>
                </slot>
            </div>
            <div class="modal-footer">
                <slot name="footer">
                    <button type="button" class="btn-blue" @click="close">返回作答</button>
                    <button type="button" class="btn-red" @click="submit_end">确定交卷</button>
                </slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Modal',
    data () {
        return {
        }
    },
    methods: {
        close: function () {
            this.$emit('close');
        },
        submit_end:function(){
            this.$router.push({path:"/end"});
        }
    }
}
</script>
<style scoped>
    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal {
        background-color: #fff;
        border: 1px solid #ddd;
        overflow-x:auto;
        display: flex;
        flex-direction: column; 
    }
    .modal-header,
    .modal-footer {       
        display: flex;
    }
    .modal-header {
        border-bottom: 1px solid #ddd;
        color: rgba(0,0,0,.8);
        justify-content: space-between;
        padding-left:15px;
    }
    .modal-header h2{
        color: #f15a24;
    }
    .modal-footer {
        border-top: 1px solid #eee;
        padding: 15px;
    }
    .modal-body {
        position: relative;
        padding: 20px 10px;
        color: rgba(0,0,0,.8);
    }
    .modal-body span{
        color:#4f93fe;
    }
    .btn-blue {
        background-color: #4f93fe;
        border: 1px solid #4f93fe;
    }
    .btn-red{
        background-color: #fe4fa1;
        border: 1px solid #fe4fe1;  
        margin-left: 50%;
    }
    .btn-blue,.btn-red{
        width: 100px;
        height: 40px;
        color: #fff;
        border-radius: 10px;
    }
</style>